<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>日期预约选择（接口模拟数据）</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">

<!-- 图例（居中） -->
<div class="legend" style="display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; font-size: 14px; align-items: center;">
    <div class="legend-item" style="display: flex; align-items: center; gap: 6px;">
        <div style="width: 16px; height: 16px; border-radius: 3px; border: 1px solid #E9ECF2; background-color: #fff; box-sizing: border-box;"></div>
        <span>可预约</span>
    </div>

    <div class="legend-item" style="display: flex; align-items: center; gap: 6px;">
        <div style="width: 16px; height: 16px; border-radius: 3px; border: 1px solid #E9ECF2; background-color: #f5f5f5; box-sizing: border-box;"></div>
        <span>已预约</span>
    </div>

    <div class="legend-item" style="display: flex; align-items: center; gap: 6px;">
        <div style="width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255,106,42,0.1); background-color: rgba(255,106,42,0.12); box-sizing: border-box;"></div>
        <span>我的预约</span>
    </div>
</div>

<!-- 日历容器 -->
<div id="calendar" class="calendar" style="
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 400px;
      justify-content: center;
      margin: 0 auto;
  ">
    <!-- 这里日历格通过 JS 动态生成 -->
</div>

<script>

    /**
     * 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。
     * 我们可以用 JS 面板来开发一些定制度高功能，比如：调用API接口，自定义动作执行等等。
     */

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
    export function didMount() {
        ("「页面 JS」：当前页面地址 " + location.href);

        // 模拟接口返回数据
        const dates = [
            { date: '2025-10-09', label: '10月9日', weekday: '周四', state: 'my-booking' },
            { date: '2025-10-10', label: '10月10日', weekday: '周五', state: 'booked' },
            { date: '2025-10-11', label: '10月11日', weekday: '周六', state: 'available' },
            { date: '2025-10-12', label: '10月12日', weekday: '周日', state: 'available' },
            { date: '2025-10-13', label: '10月13日', weekday: '周一', state: 'available' },
            { date: '2025-10-14', label: '10月14日', weekday: '周二', state: 'available' },
            { date: '2025-10-15', label: '10月15日', weekday: '周三', state: 'booked' },
        ];

        const calendar = document.getElementById('calendar');

        // 各状态对应的基础样式
        const baseStyle = "width: 100%; height: 60px; box-sizing: border-box; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; user-select: none;";

        const stateStyles = {
            "my-booking": baseStyle + " border: 1px solid rgba(255,106,42,0.2); background-color: #ffe8df; color: #363A44; cursor: not-allowed;",
            "booked": baseStyle + " border: 1px solid #E9ECF2; background-color: #f5f5f5; color: #363A44; cursor: not-allowed;",
            "available": baseStyle + " border: 1px solid #E9ECF2; background-color: #fff; color: #363A44; cursor: pointer;",
        };

        // 选中样式（覆盖 available）
        const selectedStyle = baseStyle + " border: 1px solid #428FFC; background: rgba(66,143,252,0.08); color: #428FFC; cursor: pointer;";

        // 渲染日历格
        dates.forEach(item => {
            const div = document.createElement('div');
            div.className = 'day ' + item.state;
            div.dataset.state = item.state;
            div.dataset.date = item.date;
            div.dataset.selected = "false"; // 初始化未选中
            div.style.cssText = stateStyles[item.state] || baseStyle;
            div.innerHTML = `${item.label}<br>${item.weekday}`;

            if(item.state === 'available') {
                div.addEventListener('click', () => {
                    if(div.dataset.selected === "true") {
                        // 已选中，取消选中
                        div.dataset.selected = "false";
                        div.style.cssText = stateStyles['available'];
                        console.log('取消选中日期：', div.dataset.date);
                    } else {
                        // 未选中，选中
                        div.dataset.selected = "true";
                        div.style.cssText = selectedStyle;
                        console.log('选中日期：', div.dataset.date);
                    }
                });
            }
            calendar.appendChild(div);
        });
    }
</script>


</body>
</html>
